import { useEffect, useState } from 'react'
import { Button, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import instance from '../../api/instance'
import type { FormProps } from 'antd';
import { Checkbox, Form, Input } from 'antd';
function Index() {
  const [data, setdata] = useState([])
  const [page, setpage] = useState(1)
  const [pageSize, setpageSize] = useState(10)
  const [count, setcount] = useState()
  const [title, settitle] = useState('')
  let xr = async () => {
    const params: {
      page: number,//页码  必传
      pageSize: number,//每页显示条数 必传
      keyword: string,//搜索标题
    } = {
      page, pageSize
    }
    if (title) params.keyword = title
    const res = await instance.get('/article/list', { params })
    console.log(res)
    setdata(res.data.rows)
    setcount(res.data.count)
  }
  useEffect(() => {
    xr()
  }, [page, pageSize, title])
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'createdAt',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'updatedAt',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },

  ];
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
    title?: string
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    settitle(values.title)
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Form
        labelAlign='right'
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label=""
          name="title"
        >
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table<DataType> columns={columns} dataSource={data} rowKey='id' pagination={{
        total: count,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `Total ${total} items`,
        onChange: (page, pageSize) => {
          setpage(page)
          setpageSize(pageSize)
        }
      }} />
    </div>
  )
}

export default Index
